<template>
  <div class="main">
    <Navigation
      @showPoints="showPoints"
      @clearPoints="clearPoints"
    />
    <div
      ref="container"
      class="map-container"
    />
    <div class="legend">
      {{ t('map.date') }}
      <select v-model="ice_date">
        <option
          v-for="date in available_dates"
          :key="date"
          :value="date"
        >
          {{ date }}
        </option>
      </select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Navigation from '@/components/Navigation.vue';

import { onMounted, ref, watch } from 'vue';

import { useI18n } from 'vue-i18n';

import { api } from '@/api';
import { MegaMap } from '@/utils/map';

import { useFleetStore } from '@/stores/fleet';
import { useGraphStore } from '@/stores/graph';


function showPoints(start: number[], end: number[]) {
	map.graph_layer.placePoints(start, end);
}

function clearPoints() {
	map.graph_layer.clearPoints();
}

const { t } = useI18n();

const map = new MegaMap();
const container = ref<HTMLDivElement>();

const available_dates = ref<string[]>([]);
const ice_date = ref('');

api.getDateList().then(response => {
	available_dates.value = response.dates;
	ice_date.value = available_dates.value[0];
});

watch(() => ice_date.value, () => {
	api.getIce(ice_date.value).then(response => {
		map.heatmap_layer.update(
			response.ice_cover.lat,
			response.ice_cover.lon,
			response.ice_cover.speed
		);
	});
});

onMounted(() => {
	if (!container.value) return;

	map.attach(container.value);
});


useFleetStore().init();
useGraphStore().init();
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: row;

	&::v-deep(>*) {
		flex: 1;
	}
}

.map-container {
	width: 100%;
	height: 100%;
}

.legend {
	position: fixed;
	right: 16px;
	bottom: 16px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	background-color: white;
	padding: 8px 12px;
}
</style>